<template>
    <div class="body">
        <page-aside icon="icon-guahaowenzhen" title="智能药品查询" desc="快速查找药品信息，了解用药指导与注意事项，保障用药安全。">
            <template #interact>
                <div class="drug-search-input">
                    <input class="input-box" placeholder="输入药品名称..." v-model="medicineKeyword">
                </div>
                <div class="drug-img-uploader">
                    <el-upload
                        action="http://localhost:8088/file/uploadForMedicine"
                        :show-file-list="false" :auto-upload="true"
                        :on-success="res => uploadSuccess(res.data)"
                    >
                        <img v-if="imgUrl" :src="imgUrl" class="drug-img" />
                        <el-icon v-else class="uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </div>
                <el-button @click="sendRequest" class="search-btn" type="info" size="large">查询</el-button>
            </template>
        </page-aside>
        <div class="drug-search-result">
            <el-card class="drug-search__card">
                <div class="drug-name">
                    {{ drugInfo.name }}
                </div>
                <div class="drug-desc">
                    常见商品名：{{ drugInfo.nickname }}
                </div>
                <div class="drug-tags">
                    <el-tag v-for="tag in drugInfo.label" :key="tag.name" :type="tag.type" effect="dark">
                        {{ tag.name }}
                    </el-tag>
                </div>
            </el-card>
            <el-tabs tab-position="left" style="height: 200px" class="drug-tabs">
                <el-tab-pane v-for="item in resultItem" :key="item.id" :label="item.title" class="tabs-item">
                    <el-empty description="暂无内容，搜索后再来吧~" v-show="!item.content" />
                    <div class="drug-info markdown-here-wrapper">
                        {{item.content}}
                    </div>
                </el-tab-pane>
                <el-tab-pane label="知识图谱" class="tabs-item">
                    <div class="graph-container">
                        <neo4j-chart :nodes="nodes" :links="links" />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import PageAside from '../components/PageAside.vue'
import { Plus } from '@element-plus/icons-vue'
import '../assets/styles/markdown.scss'
import Neo4jChart from '../components/Neo4jChart.vue';
import neo4jRequest from '../utils/neo4jRequest';
import request from '../utils/request';

const drugInfo = reactive({
    name: '阿莫西林胶囊',
    nickname: '阿克林、抗之露、海莫',
    label: [
        {
            type: 'danger',
            name: '处方药'
        },
        {
            type: 'success',
            name: '医保甲类'
        },
        {
            type: 'primary',
            name: '孕期较安全（B）'
        },
        {
            type: 'success',
            name: '哺乳期可用（L1）'
        },
        {
            type: 'danger',
            name: '婴儿慎用'
        }
    ],
    reactions: '阿莫西林可能引起的不良反应包括：消化系统：恶心、呕吐、腹泻、胃部不适。过敏反应：皮疹、荨麻疹、过敏性休克。其他：头晕、口干、感染性霉菌性阴道炎。',
    forbidden: '阿莫西林的禁忌包括对β-内酰胺类抗生素过敏的患者，尤其是对青霉素过敏的人群。此外，对阿莫西林成分或其他青霉素类抗生素过敏的人也应避免使用。',
    role: '阿莫西林属于β-内酰胺类抗生素，作用于细菌细胞壁合成过程中的特定酶系统，从而抑制细菌的生长和繁殖。它拥多种革兰氏阳性和阴性细菌均有活性，通常用于治疗中耐药性较低的感染。',
    advise: '一般情况下，阿莫西林可以与食物一起服用，但可以考虑以下建议：避免与高蛋白餐一同服用，以减少药物的吸收影响。饮食宜清淡，避免油腻和刺激性食物，有助于减少消化不良的可能性。',
    similar: '类似作用的抗生素包括：氨苄西林（Amoxicillin-Clavulanate）：结合了阿莫西林和克拉维酸，增强了对一些抗药性细菌的活性。头孢菌素类抗生素：如头孢氨苄、头孢克肟，适用于对青霉素过敏或不耐的患者。'
})
const resultItem = [
    {
        id: 1,
        title: '功效作用',
        content: drugInfo.role
    },
    {
        id: 2,
        title: '用药禁忌',
        content: drugInfo.forbidden
    },
    {
        id: 3,
        title: '用法用量',
        content: drugInfo.advise
    },
    {
        id: 4,
        title: '不良反应',
        content: drugInfo.reactions
    },
    {
        id: 5,
        title: '相似药物',
        content: drugInfo.similar
    }
]
const medicineKeyword = ref()
const imgUrl = ref()
const nodes = ref([
    { id: "1", name: '暂未查到数据', describe: '暂未查到数据' },
]);
const links = ref([
    { source: "1", target: "2", type: 'Link Type' },
]);

function sendRequest() {
    alert('系统正在生成中, 该动作可能耗时较长，请稍后......')
    console.log(medicineKeyword.value)
    changeMed();
    request.post("ask/searchMedicine", { name: medicineKeyword.value }).then(res => {
        if (res.code === 200) {
            imgUrl.value = res.data.url
            drugInfo.name = data.name
            drugInfo.role = data.intro[0]
            drugInfo.reactions = data.intro[1]
            drugInfo.advise = data.intro[2]
            drugInfo.forbidden = data.intro[3]
            drugInfo.similar = data.intro[4]
            medicineKeyword.value = res.data.name
        } else {
            alert("查询药品数据失败")
        }
    })
}

function uploadSuccess(data) {
    imgUrl.value = data.url
    drugInfo.name = data.name
    drugInfo.role = data.intro[0]
    drugInfo.reactions = data.intro[1]
    drugInfo.advise = data.intro[2]
    drugInfo.forbidden = data.intro[3]
    drugInfo.similar = data.intro[4]
    medicineKeyword.value = data.name
    changeMed()
}

function changeMed() {
    neo4jRequest.get("neo4j/findMedicineRelationShips/" + medicineKeyword.value
    ).then(res => {
        if (res.code === 200) {
            nodes.value = res.data.node;
            links.value = res.data.path;
        } else {
            alert("查询药品图谱失败")
        }
    })
};

</script>

<style scoped lang="scss">
.body {
    display: flex;
    height: 95vh;
}

.drug-search-input {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 50px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15000000596046448);
    overflow: hidden;
    .input-box {
        border: none;
        padding: 15px;
        outline: none;
        font-size: 16px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
}

.drug-img-uploader {
    width: 100%;
    margin: 50px auto;
}

.search-btn {
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.15000000596046448);
}

.drug-search-result {
    flex: 1;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.drug-search__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.drug-search__card {
    width: 100%;
    margin-bottom: 20px;
    .drug-name {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .drug-desc {
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
    }
    .drug-tags {
        margin-top: 10px;
        .el-tag {
            margin-right: 10px;
            margin-bottom: 10px;
        }
}
}

.medicine-box {
    width: 33vw;
    height: 24vh;
    background: rgba(72, 100, 125, 1);
    opacity: 1;
    position: absolute;
    top: 110px;
    left: 45px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    }

.medicine-box {
    width: 33vw;
    height: 24vh;
    background: rgba(72, 100, 125, 1);
    opacity: 1;
    position: absolute;
    top: 110px;
    left: 45px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.drug-tabs {
    flex: 1;
    margin-top: 10px;
    .tabs-item {
        padding: 20px;
    }
}
</style>

<style>
.drug-img-uploader .el-upload {
    width: 100%;
    height: 25vh;
    box-sizing: border-box;
    border: 4px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.drug-img-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.uploader-icon {
    font-size: 28px;
    color: #fff;
    width: 178px;
    height: 178px;
    text-align: center;
}

.el-tabs__content, .el-tab-pane {
    box-sizing: border-box;
    height: 100%;
}

.graph-container {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>